Django - template (ㄧ) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 15

Modern Web

Django案例實作之踩坑全記錄系列第 15 篇

Django - template (ㄧ)

12th鐵人賽

flyourideas

2020-09-15 22:55:14

1259 瀏覽

分享至

Quiz的專案結構相當簡單，只需要建立測驗及結果的畫面，從quiz/urls.py來看：

urlpatterns = [
    path('play/', views.play),
    path('results/', views.answer_count),
    ]

測驗表單的畫面：
http://127.0.0.1:8000/quiz/

第一步：views

# quiz/views.py
from django.shortcuts import render
from .models import Question

def play(request):
    question = Question.objects.all() 
    return render(request, 'play.html', {'question':question})

藉由QuerySet取得所有題目question，再用render渲染play.html樣板。

第二步：template

先在template下新增play.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Easiest Harry Potter Quiz Ever</title>
</head>
<body>
<div id="set" style="padding-top: 50px;">
~The Easiest Harry Potter Quiz Ever~
</div>
<form action="" method="post">
<div style="padding-top: 60px;">
    {% csrf_token %}
    {% for q in question %}
    <table>
        <tr>
            <td>{{ forloop.counter }}.{{q.question_text}}</td>
        </tr>

        {% for c in q.choice_set.all %}
            <tr>
            <td><input type="radio" name="{{ q.id }}" id="c-{{ forloop.counter }}"                            required>{{ c.choice_text }}</td>
            </tr>
        {% endfor %}
    </table>
    {% endfor %}
    <hr width="50%" align="left">

    <input type="submit" value="submit"/>
</div>
</form>
</body>
</html>

loop在Django的固定寫法就是{% for %}，一對大括號跟百分比，遞迴結尾要寫{% endfor %}，否則會報錯。
"forloop.counter"為遞迴的次數，我拿它當作題目的序號。
{{q.question_text}}：在template，加上一個dot就可以得到你要的欄位。若要取得context裡的值，外面要加個{{ }}，這是固定寫法。
{% for c in q.choice_set.all %}：透過"_set.all"可以得到ForeighKey相關的物件，在這邊取得了題目的四個選項。
當頁面為form表單提交時，一般都需要在form標籤中加上{% csrf_token %}，因為在settings.py有一個預設防範CSRF的模組(MIDDLEWARE中的'django.middleware.csrf.CsrfViewMiddleware')，所以若沒有添加{% csrf_token %}，在資料送出後會看到下面這個畫面：

小結：關於分數計算的部分明天繼續。

Django - render, redirect (補充)

(二更)Django - template(二)

系列文

Django案例實作之踩坑全記錄共 34 篇

RSS系列文訂閱系列文

27 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

菜鳥碼農

iT邦新手 5 級 ‧ 2021-08-30 16:23:51

選項的標籤要加上value屬性不然下一篇表單處理的select抓不到選項文字內容

 <tr>
            <td><input type="radio" name="{{ q.id }}" value = {{c.choice_text}} id="c-{{ forloop.counter }}" required>{{ c.choice_text }}</td>
            </tr>